<template>
  <div id="GenColumn" class="h-[100%]">
    <a-form
      class="h-[100%]"
      :label-col="{ span: 8 }"
      :model="codeFormData.info"
      :rules="rules"
      @finish="finish"
    >
      <TopTool>
        <template #left>
          <div class="flex">
            <div class="system__icon" @click="goBack">
              <LeftOutlined />
            </div>
            <div class="system__icon" @click="goGenHome">
              <HomeOutlined />
            </div>
          </div>
        </template>
        <template #right>
          <div class="flex gap-1 items-center">
            <a-tooltip content="保存">
              <a-button htmlType="submit" type="text" :loading="loading">保存</a-button>
            </a-tooltip>
            <Gen @submit="finish" :loading="loading" />
          </div>
        </template>
      </TopTool>
      <a-card
        :bordered="false"
        style="height: calc(100% - 45px)"
        :body-style="{ overflowY: 'auto', height: '100%' }"
      >
        <a-row>
          <a-col :span="12" :offset="2">
            <div class="p-8 flex flex-col gap-2 mb-8">
              <h3>配置生成的代码</h3>
              <div class="system__subtitle">这里的配置将会完全映射到代码中,请谨慎修改</div>
              <div>
                <a-tooltip title="填写预配置">
                  <a-button @click="fillContent">一键填充</a-button>
                </a-tooltip>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item help="影响SQL生成,挂载的上级菜单" label="上级菜单" name="parentMenuId">
              <a-tree-select
                v-model:value="codeFormData.info.parentMenuId"
                :field-names="{
                  value: 'menuId',
                  label: 'menuName',
                }"
                placeholder="请选择上级菜单"
                :tree-data="menuData"
                allowClear
              ></a-tree-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-for="(item, key) in formItems" :key="key">
          <a-col :span="12">
            <a-form-item :help="item.desc" :label="item.label" :name="item.name" required>
              <a-input
                v-model:value="(codeFormData.info as any)[item.name]"
                :placeholder="`请输入${item.label}`"
                :maxLength="140"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { getParentMenus } from '@/api/modules/system/menu/utils';
import { updateCode } from '@/api/modules/tool/gen/gen';
import { response } from '@/utils/table/table';
import type { Rule } from 'ant-design-vue/es/form/interface';
import { GenStepEnum, nextStep } from '../data/config';
import { codeFormData } from '../data/data';
import TopTool from './components/TopTool.vue';

import useSystemStore from '@/store/system';
import { goGenHome } from '../data/curd';
import Gen from './gen/Gen.vue';

const menuData = ref();
const loading = ref(false);

onMounted(async () => {
  menuData.value = await getParentMenus();
});
const fillContent = () => {
  const store = useSystemStore();
  codeFormData.value.info.parentMenuId = store.$state.gen.parentId;
  codeFormData.value.info.moduleName = store.$state.gen.moduleName;
  codeFormData.value.info.packageName = store.$state.gen.packageName;
};
const goBack = () => {
  nextStep(GenStepEnum.FIELD);
};

/* 保存 */
const finish = async () => {
  loading.value = true;
  codeFormData.value.info.options = {
    parentMenuId: codeFormData.value.info.parentMenuId,
  };
  await response(updateCode, codeFormData.value.info);
  loading.value = false;
};

const formItems = [
  {
    label: '包路径',
    desc: `配置JAVA包路径,com.ax.text`,
    name: 'packageName',
    maxLength: 16,
  },
  {
    label: 'JAVA类名',
    desc: `将会修改Java的类名`,
    name: 'className',
    maxLength: 48,
  },
  {
    label: '父模块名',
    desc: `业务模块名,影响前后端,sql代码生成`,
    name: 'moduleName',
    maxLength: 48,
  },
  {
    label: '子模块',
    desc: `生成子模块名，,影响前后端,sql代码生成`,
    name: 'businessName',
    maxLength: 48,
  },
  {
    label: '功能名',
    desc: `用于代码注释,不影响代码,但是会影响前端文案，和代码注释`,
    name: 'functionName',
    maxLength: 48,
  },
];

const rules: Record<string, Rule[]> = {
  tableName: [
    {
      required: true,
    },
  ],
  functionAuthor: [
    {
      required: true,
    },
  ],
};
</script>

<style lang="scss" scoped>
.field-head {
  line-height: 36px;
  border-bottom: 1px solid var(--border-color);
  padding: 0 12px;
}
</style>
